<!-- 地址选择的组件 -->
<template>
	<div class="my-city">
		<div class="city-list-container">
			<van-index-bar :index-list="indexList">
				<van-index-anchor index="定位">定位城市</van-index-anchor>
				<div class="city-list city-list-inline clearfix">
					<div class="location-city">定位失败，请点击重试</div>
				</div>
				<van-index-anchor index="最近">最近访问的城市</van-index-anchor>
				<div class="city-list city-list-inline clearfix">
					<div class="city-item">北京</div>
					<div class="city-item">上海</div>
					<div class="city-item">广州</div>
				</div>
				<van-index-anchor index="热门">热门城市</van-index-anchor>
				<div class="city-list city-list-inline clearfix">
					<div
						@click="changeCity(item)"
						class="city-item"
						v-for="item in cities.slice(0, 12)"
						:key="item.id"
					>
						{{ item.nm }}
					</div>
				</div>
				<!-- 以字母开头城市的列表开始 -->
				<!-- A B C D  -->
				<section v-for="(cities, key) in cts" :key="key">
					<van-index-anchor :index="key">{{ key }}</van-index-anchor>
					<div v-for="city in cities" :key="city.id" class="city-list city-list-block clearfix">
						<div @click="changeCity(city)" class="city-item" :key="city.id">
							{{ city.nm }}
						</div>
					</div>
				</section>
				<!-- 以字母开头城市的列表结束 -->
			</van-index-bar>
		</div>
	</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import Vue from 'vue';
import { IndexBar, IndexAnchor } from 'vant';
import axios from '@/api/instance';
import _ from 'lodash';

Vue.use(IndexBar);
Vue.use(IndexAnchor);
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      indexList: ['定位', '最近', '热门'],
      // 后台返回的城市的数据
      cities: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {
    cts() {
      // 1. 对 cities 中的数据进行归类，按照数据名字的首字母进行归类
      const cityObj = _.groupBy(this.cities, (v) => v.py.slice(0, 1));
      return Object.keys(cityObj)
        .sort()
        .reduce((obj, key) => {
          // key => a b c d obj {} {A:[...]}
          const upperKey = key.toUpperCase(); // A B C D...
          this.indexList.push(upperKey);
          // obj["A"] = cityObj[key]
          // obj[upperKey] = cityObj[key]
          obj[upperKey] = cityObj[key];
          console.log(obj);
          return obj;
        }, {});
      // return cityObj;
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    changeCity(city) {
      console.log(city);
      localStorage.setItem('cityId', city.id);
      localStorage.setItem('cityName', city.nm);
      // this.$router this.$route
      // this.$router.back();
      this.$router.push('/home/movies');
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    const result = await axios.get('/cities.json');
    // console.log(result);
    this.cities = result.cts;
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
@import url('@/assets/border.less');
.my-city {
	position: absolute;
	height: 100%;
	width: 100%;
	.city-list-container {
		position: absolute;
		z-index: 1000;
		background-color: #ebebeb;
		font-size: 0.14rem;
		color: #333;
		top: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		.city-list {
			padding-right: 30px;
		}
		.city-list-inline {
			background-color: #f5f5f5;
			padding-bottom: 8px;
		}
		.city-list-block {
			background-color: #f5f5f5;
		}
		.city-list-inline .location-city,
		.city-list-inline .city-item {
			float: left;
			background-color: #fff;
			width: 29%;
			box-sizing: border-box;
			height: 0.33rem;
			margin-top: 15px;
			margin-left: 4%;
			padding: 0 4px;
			border: 1px solid #e6e6e6;
			border-radius: 3px;
			line-height: 0.33rem;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.clearfix::after {
			content: ' ';
			display: table;
			clear: both;
		}
		.city-list-block .city-item {
			height: 0.45rem;
			line-height: 0.45rem;
			margin-left: 0.15rem;
			.border-1px(0 0 1px 0);
		}
		.city-list-block .city-item:last-child {
			border-bottom: none;
		}
	}
}
</style>
